{% extends 'base.html' %}

{% block title %}首页 - 电影推荐系统{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">欢迎{% if user.is_authenticated %}回来，{{ user.username }}{% else %}使用电影推荐系统{% endif %}</h1>
    <p class="lead">探索各种电影，根据您的喜好获取电影推荐！</p>
    <hr class="my-4">
    {% if user.is_authenticated %}
    <p>继续探索我们的电影库，评价更多电影，获取更准确的个性化推荐。</p>
    <div class="d-flex gap-2">
        <a class="btn btn-primary" href="{% url 'user_recommendations' %}" role="button">查看推荐</a>
        <a class="btn btn-outline-secondary" href="{% url 'movie_list' %}" role="button">浏览电影</a>
    </div>
    {% else %}
    <p>浏览我们的电影库，给你喜欢的电影评分，并获取个性化推荐。</p>
    <a class="btn btn-primary btn-lg" href="{% url 'movie_list' %}" role="button">浏览电影</a>
    {% endif %}
</div>

{% if user.is_authenticated %}
<!-- 已登录用户的个性化内容 -->
<div class="row mt-5">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">您可能喜欢的电影</h5>
                <a href="{% url 'user_recommendations' %}" class="btn btn-sm btn-outline-primary">查看更多</a>
            </div>
            <div class="card-body">
                <div class="row" id="recommendedMovies">
                    <!-- 这里将通过AJAX加载推荐电影 -->
                    <div class="col-12 text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-2">正在为您加载个性化推荐...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">您的统计数据</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="icon-bg bg-primary rounded-circle p-3 me-3">
                        <i class="fas fa-film text-white"></i>
                    </div>
                    <div>
                        <h6 class="mb-0">已评价电影</h6>
                        <h4 class="mb-0" id="userRatingsCount">-</h4>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3">
                    <div class="icon-bg bg-success rounded-circle p-3 me-3">
                        <i class="fas fa-star text-white"></i>
                    </div>
                    <div>
                        <h6 class="mb-0">平均评分</h6>
                        <h4 class="mb-0" id="userAvgRating">-</h4>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'user_profile' %}" class="btn btn-outline-primary">查看个人中心</a>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">快速导航</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="{% url 'movie_list' %}?sort=rating" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-trophy me-2"></i>评分最高的电影</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="{% url 'movie_list' %}?sort=year" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-calendar-alt me-2"></i>最新上映的电影</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="{% url 'user_ratings' %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-history me-2"></i>我的评分历史</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加AI功能卡片 -->
    <div class="col-md-12 mt-4">
        <h2 class="mb-4">AI电影助手</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-comments fa-3x text-primary"></i>
                        </div>
                        <h4 class="card-title">电影聊天助手</h4>
                        <p class="card-text">通过自然对话方式，获取个性化电影推荐和解答电影相关问题。</p>
                        <a href="{% url 'chatbot' %}" class="btn btn-primary">开始聊天</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-smile fa-3x text-primary"></i>
                        </div>
                        <h4 class="card-title">根据心情关键词电影推荐</h4>
                        <p class="card-text">根据你当前的心情或场景，推荐最适合你观看的电影。</p>
                        <a href="{% url 'mood_recommendations' %}" class="btn btn-primary">查看推荐</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-film fa-3x text-primary"></i>
                        </div>
                        <h4 class="card-title">电影深度解析</h4>
                        <p class="card-text">查看电影详情页面，获取AI提供的电影深度分析和相似电影推荐。</p>
                        <a href="{% url 'movie_list' %}" class="btn btn-primary">浏览电影</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% else %}
<!-- 未登录用户的内容 -->
<div class="row mt-5">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">浏览电影</h5>
                <p class="card-text">探索我们的电影库，包含各种类型的电影。</p>
                <a href="{% url 'movie_list' %}" class="btn btn-outline-primary">查看电影</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">评价电影</h5>
                <p class="card-text">为您看过的电影评分，帮助我们了解您的喜好。</p>
                <a href="{% url 'login' %}" class="btn btn-outline-primary">登录评分</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">获取推荐</h5>
                <p class="card-text">基于您的评分和喜好，我们将推荐适合您的电影。</p>
                <a href="{% url 'register' %}" class="btn btn-outline-primary">注册获取推荐</a>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if user.is_authenticated %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 加载用户统计数据
    fetch('/movies/api/user-stats/')
        .then(response => response.json())
        .then(data => {
            document.getElementById('userRatingsCount').textContent = data.ratings_count;
            document.getElementById('userAvgRating').textContent = data.average_rating;
        })
        .catch(error => console.error('获取用户统计数据失败:', error));
    
    // 加载推荐电影
    fetch('/movies/api/recommended-movies/?limit=4')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('recommendedMovies');
            container.innerHTML = '';
            
            if (data.movies && data.movies.length > 0) {
                data.movies.forEach(movie => {
                    container.innerHTML += `
                        <div class="col-md-3 mb-3">
                            <div class="card h-100">
                                <img src="${movie.poster_url || 'https://via.placeholder.com/150x225?text=暂无海报'}" 
                                     class="card-img-top" alt="${movie.title}" 
                                     onerror="this.src='https://via.placeholder.com/150x225?text=暂无海报'">
                                <div class="card-body p-2">
                                    <h6 class="card-title text-truncate">${movie.title}</h6>
                                    <p class="card-text small mb-1">${movie.year}</p>
                                    <a href="/movies/${movie.id}/" class="btn btn-sm btn-outline-primary w-100">查看</a>
                                </div>
                            </div>
                        </div>
                    `;
                });
            } else {
                container.innerHTML = `
                    <div class="col-12">
                        <div class="alert alert-info">
                            暂无推荐电影。尝试评价更多电影以获取个性化推荐！
                            <br>
                            <a href="/movies/" class="btn btn-primary mt-2">浏览电影</a>
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('获取推荐电影失败:', error);
            const container = document.getElementById('recommendedMovies');
            container.innerHTML = `
                <div class="col-12">
                    <div class="alert alert-warning">
                        加载推荐电影时出错。请稍后再试。
                    </div>
                </div>
            `;
        });
});
</script>
{% endif %}
{% endblock %} 